<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>document</title>

    <style type="text/css">
        .wrap {
            width: 400px;
            margin: 50px auto;
            color: #333;
            font-family: '\5FAE\8F6F\96C5\9ED1';
        }

        .wrap-date {
            font-size: 0;
            list-style: none outside none;
            margin-top: 8px;
        }

        .wrap-date li {
            width: 80px;
            display: inline-block;
            *display: inline;
            *zoom: 1;
            text-align: center;
            font-size: 24px;
            background: hotPink;
            padding: 1px 0 5px;
            margin-right: 3px;
        }

        .date {
            font-family: Tahoma;
            font-size: 50px;
            color: #fff;
        }

        #endTips {
            color: #999;
            background: #e9e9e9;
            line-height: 2.4em;
            text-align: center;
            margin-top: 15px;
        }
    </style>

    <script type="text/javascript">
        var targetDate = '2019-10-10 18:00:00';  // 目标日期（活动截止时间）

        // 创建倒计时定时器
        var timer = window.setInterval(function () {
            RefreshTime(targetDate);
        }, 1000);

        function RefreshTime(targetDate) {
            // 获取本地当前时间，截止时间 - 当前时间 = 倒计时时间
            var Today = new Date();
            var endDate = new Date(targetDate);
            var leftTime = endDate.getTime() - Today.getTime();
            var leftSecond = parseInt(leftTime / 1000);
            var Day = Math.floor(leftSecond / (60 * 60 * 24));
            var Hour = Math.floor((leftSecond - Day * 24 * 60 * 60) / 3600);
            var Minute = Math.floor((leftSecond - Day * 24 * 60 * 60 - Hour * 3600) / 60);
            var Second = Math.floor(leftSecond - Day * 24 * 60 * 60 - Hour * 3600 - Minute * 60);

            if (Day < 0) {
                clearInterval(timer); // 清除定时器
                document.getElementById('endTips').innerHTML = '活动已结束';
                document.getElementById('wrapDate').style.display = 'none';
                return;
            }

            // 写入容器
            document.getElementById('timeDay').innerHTML = Day;
            document.getElementById('timeHour').innerHTML = Hour;
            document.getElementById('timeMin').innerHTML = Minute;
            document.getElementById('timeSec').innerHTML = Second;
        }
    </script>
</head>

<body>

    <div class="wrap">
        距活动结束仅剩：
        <ul class="wrap-date" id="wrapDate">
            <li><span id="timeDay" class="date">0</span><br />天</li>
            <li><span id="timeHour" class="date">0</span><br />时</li>
            <li><span id="timeMin" class="date">0</span><br />分</li>
            <li><span id="timeSec" class="date">0</span><br />秒</li>
        </ul>
        <div id="endTips"></div>
    </div>

</body>

</html>